<template>
  <div class="forthStep">
    <div class="upload-tab">
      <div class="baseDiv" :class="{'on': item.id == activeKey}" v-for="(item,index) in dataList" :key="index" @click="changeTab(item , index)">
       <p class="inner-title">{{item.showBak1}}</p> 
       <p class="inner-title" style="font-size: 16px">{{item.showBak2}}</p>
      </div>
    </div>
    <el-tabs v-model="activeKey" @tab-click="handleClick" type="border-card">
      <el-tab-pane v-for='(item,index) in dataList' :key='index' :name='item.id' :label="item.showBak"></el-tab-pane>
      <div class="view-outer">
        <div class='view-inner' v-for="(items,index) in recordsBak" :key='index'>
          <div class="title">
            <div>{{ items[0].recordsStationName }} </div>
            <div style="color: #00b99e;font-size: 16px">（考题：{{ items[0].examName }}）</div>
            <!-- <div>{{ items[1][0] }}</div> -->
          </div>
          <div v-for="(v,k) in items" :key='k' class='content-inner'>
            <p class="main-inner">第 <span style="font-weight: 500;font-size: 20px;">{{ v.round }}</span> 轮</p>
            <p class="main-inner">第 <span style="font-weight: 500;font-size: 20px;">{{ v.scene }}</span> 次</p>
            <p class="name-inner">{{ v.studentName || v.anonymousNumber }}</p>
          </div>
        </div>
      </div>
    </el-tabs>
  </div>
</template>
<script>
import { recordsDetail, recordsstationstudentList } from '@/api/examTest.js'
import { examRecordsSubmitA } from '@/api/examinee.js'

export default{
  props: ['recordsStationOptions', 'examOptions', 'recordsId'],
  data () {
    return {
      dataList: [],
      activeKey: 0,
      recordsBak: []
    }
  },
  methods: {
    changeTab (item, index) {
      this.activeIndex = Number(index)
      this.needSave = false
      this.activeKey = item.id
      this.getRecordsstationList()
    },
    handleClick (val) {
      this.activeKey = val.name
      this.getRecordsstationList()
    },
    // 根据对象属性分组
    groupBy (array, key) {
      return array.reduce((result, currentItem) => {
        // 使用 Map 对象来存储分组后的数据
        const keyValue = currentItem[key]
        if (!result.has(keyValue)) {
          result.set(keyValue, [currentItem])
        } else {
          result.get(keyValue).push(currentItem)
        }
        return result
      }, new Map())
    },
    getRecordsstationList () {
      // 查看
      recordsstationstudentList({recordsDateId: this.activeKey, scene: 1}).then(res => {
        let records = res.data.page.records.sort((a, b) => Number(a.recordsStationNumber) - Number(b.recordsStationNumber))
        let recordsBak = this.groupBy(records, 'recordsStationNumber')
        let aaa = JSON.parse(JSON.stringify(recordsBak))
        let recordsBak2 = []
        aaa.map(val => {
          recordsBak2.push(val[1])
        })
        recordsBak2.map(v => {
          v = v.sort((a, b) => Number(a.round) - Number(b.round))
        })
        this.recordsBak = JSON.parse(JSON.stringify(recordsBak2))
      })
    },
    getRecordsDetail2 () {
      recordsDetail({id: this.recordsId}).then(res => {
        this.dataList = res.data.examRecordsDtos[0].examRecordsDates
        this.dataList = this.dataList.sort((a, b) => new Date(a.examStartDate.substring(0, 19)).getTime() - new Date(b.examStartDate.substring(0, 19)).getTime())
        this.dataList.map(val => {
          val.showBak = val.examStartDate.substring(0, 16) + ' ~ ' + val.examEndDate.substring(5, 11)
          val.showBak1 = val.examStartDate.substring(0, 10)
          val.showBak2 = val.examStartDate.substring(11, 16) + ' ~ ' + val.examEndDate.substring(11, 16)
        })
        this.activeKey = this.dataList[0].id
        this.getRecordsstationList()
      })
    },

    secondHandleEndNiMing () {
      let params = {
        id: this.recordsId,
        ifAnonymous: 1
        // examStatus: 1
      }
      examRecordsSubmitA(params).then(res => {
        console.log(res)
        this.$message({
          message: '匿名考生添加成功',
          type: 'success'
        })
        this.$emit('changeTab')
      })
    }
  }
}
</script>
<style lang='scss'>
  .forthStep{
    .el-tabs__header{
      display: none;
    }
  }
  .view-outer{
    .view-inner{
      margin: 10px;
      padding: 10px 20px;
      border: 1px solid #00b99e50;
      background: #f5f5f5;
      border-radius: 6px;
      .title{
        font-size: 18px;
        font-weight: 500;
        color: #000;
        position: relative;
        border-bottom: 1px solid #99999950;
        padding: 10px 0;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .title:before{
        content: '';
        position: absolute;
        height: 16px;
        width: 2px;
        border-radius: 2px;
        background: #00b99e;
        left: -10px;
        top: 12px;
      }
      .content-inner{
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 16px;
        color: #000;
        .main-inner{
          width: 80px;
        }
        .name-inner{
          padding-left: 10px;
          font-weight: 500;
        }
      }
    }
  }
  .upload-tab {
    height: 65px;
    overflow-x: auto;
    border-bottom: #21d0b6 2px solid;
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    .baseDiv{
      flex-basis: 180px; 
      flex-shrink: 0; 
    }
  }
  .upload-tab div {
    width: 188px;
    height: 46px;
    display: inline-block;
    text-align: center;
    float: left;
    color: #606264;
    background: url('~@/assets/img/unactive.png')  no-repeat;
    line-height: 46px;
    font-size: 14px;
    margin-right: -16px;
    position: relative;
    z-index: 5;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .upload-tab div .inner-title{
    padding: 0;
    margin: 0;
    height: 18px;
    line-height: 18px;
  }
  .upload-tab div.on {
    background: url('~@/assets/img/active.png')  no-repeat;
    color: #fff;
  }
  .upload-tab div:nth-child(1) {
    z-index: 21;
  }
  .upload-tab div:nth-child(2) {
    z-index: 20;
  }
  .upload-tab div:nth-child(3) {
    z-index: 19;
  }
  .upload-tab div:nth-child(4) {
    z-index: 18;
  }
  .upload-tab div:nth-child(5) {
    z-index: 17;
  }
  .upload-tab div:nth-child(6) {
    z-index: 16;
  }
  .upload-tab div:nth-child(7) {
    z-index: 15;
  }
  .upload-tab div:nth-child(8) {
    z-index: 14;
  }
  .upload-tab div:nth-child(9) {
    z-index: 13;
  }
  .upload-tab div:nth-child(10) {
    z-index: 12;
  }
  .upload-tab div:nth-child(11) {
    z-index: 11;
  }
  .upload-tab div:nth-child(12) {
    z-index: 10;
  }
  .upload-tab div:nth-child(13) {
    z-index: 9;
  }
  .upload-tab div:nth-child(14) {
    z-index: 8;
  }
  .upload-tab div:nth-child(15) {
    z-index: 7;
  }
  .upload-tab div:nth-child(16) {
    z-index: 6;
  }
  .upload-tab div:nth-child(17) {
    z-index: 5;
  }
  .upload-tab div:nth-child(18) {
    z-index: 4;
  }
  .upload-tab div:nth-child(19) {
    z-index: 3;
  }
  .upload-tab div:nth-child(20) {
    z-index: 2;
  }
  .upload-tab div:nth-child(21) {
    z-index: 1;
  }
</style>